રિએક્ટ ટેસ્ટિંગ લાઇબ્રેરી: ગ્લોબલ ટીમો માટે કમ્પોનન્ટ ટેસ્ટિંગની શ્રેષ્ઠ પદ્ધતિઓ

વેબ ડેવલપમેન્ટની સતત વિકસતી દુનિયામાં, તમારી રિએક્ટ એપ્લિકેશન્સની વિશ્વસનીયતા અને ગુણવત્તા સુનિશ્ચિત કરવી સર્વોપરી છે. આ ખાસ કરીને વૈશ્વિક ટીમો માટે સાચું છે જે વિવિધ વપરાશકર્તા આધાર અને સુલભતા આવશ્યકતાઓવાળા પ્રોજેક્ટ્સ પર કામ કરે છે. રિએક્ટ ટેસ્ટિંગ લાઇબ્રેરી (RTL) કમ્પોનન્ટ ટેસ્ટિંગ માટે એક શક્તિશાળી અને વપરાશકર્તા-કેન્દ્રિત અભિગમ પ્રદાન કરે છે. પરંપરાગત પરીક્ષણ પદ્ધતિઓથી વિપરીત જે અમલીકરણની વિગતો પર ધ્યાન કેન્દ્રિત કરે છે, RTL તમને તમારા કમ્પોનન્ટ્સનું પરીક્ષણ કરવા માટે પ્રોત્સાહિત કરે છે જેમ કે વપરાશકર્તા તેમની સાથે ક્રિયાપ્રતિક્રિયા કરશે, જે વધુ મજબૂત અને જાળવણીક્ષમ પરીક્ષણો તરફ દોરી જાય છે. આ વ્યાપક માર્ગદર્શિકા તમારા રિએક્ટ પ્રોજેક્ટ્સમાં RTL નો ઉપયોગ કરવા માટેની શ્રેષ્ઠ પદ્ધતિઓ પર ઊંડાણપૂર્વક ધ્યાન આપશે, જેમાં વૈશ્વિક પ્રેક્ષકો માટે યોગ્ય એપ્લિકેશન્સ બનાવવા પર ધ્યાન કેન્દ્રિત કરવામાં આવશે.

રિએક્ટ ટેસ્ટિંગ લાઇબ્રેરી શા માટે?

શ્રેષ્ઠ પદ્ધતિઓમાં ડૂબકી મારતા પહેલાં, તે સમજવું નિર્ણાયક છે કે શા માટે RTL અન્ય પરીક્ષણ લાઇબ્રેરીઓથી અલગ છે. અહીં કેટલાક મુખ્ય ફાયદાઓ છે:

• વપરાશકર્તા-કેન્દ્રિત અભિગમ: RTL વપરાશકર્તાના દ્રષ્ટિકોણથી કમ્પોનન્ટ્સના પરીક્ષણને પ્રાથમિકતા આપે છે. તમે કમ્પોનન્ટ સાથે તે જ પદ્ધતિઓનો ઉપયોગ કરીને ક્રિયાપ્રતિક્રિયા કરો છો જે વપરાશકર્તા કરશે (દા.ત., બટનો પર ક્લિક કરવું, ઇનપુટ ફીલ્ડ્સમાં ટાઇપ કરવું), જે વધુ વાસ્તવિક અને વિશ્વસનીય પરીક્ષણ અનુભવ સુનિશ્ચિત કરે છે.
• સુલભતા-કેન્દ્રિત: RTL સુલભ કમ્પોનન્ટ્સ લખવાને પ્રોત્સાહન આપે છે અને તેમને એવી રીતે પરીક્ષણ કરવા માટે પ્રોત્સાહિત કરે છે જે વિકલાંગ વપરાશકર્તાઓને ધ્યાનમાં લે છે. આ WCAG જેવા વૈશ્વિક સુલભતા ધોરણો સાથે સુસંગત છે.
• જાળવણીમાં ઘટાડો: અમલીકરણની વિગતો (દા.ત., આંતરિક સ્થિતિ, ચોક્કસ ફંક્શન કોલ્સ)નું પરીક્ષણ ટાળીને, જ્યારે તમે તમારા કોડને રિફેક્ટર કરો છો ત્યારે RTL પરીક્ષણો તૂટવાની શક્યતા ઓછી હોય છે. આ વધુ જાળવણીક્ષમ અને સ્થિતિસ્થાપક પરીક્ષણો તરફ દોરી જાય છે.
• સુધારેલ કોડ ડિઝાઇન: RTL નો વપરાશકર્તા-કેન્દ્રિત અભિગમ ઘણીવાર વધુ સારી કમ્પોનન્ટ ડિઝાઇન તરફ દોરી જાય છે, કારણ કે તમને એ વિચારવા માટે મજબૂર કરવામાં આવે છે કે વપરાશકર્તાઓ તમારા કમ્પોનન્ટ્સ સાથે કેવી રીતે ક્રિયાપ્રતિક્રિયા કરશે.
• સમુદાય અને ઇકોસિસ્ટમ: RTL એક મોટો અને સક્રિય સમુદાય ધરાવે છે, જે પૂરતા સંસાધનો, સમર્થન અને એક્સ્ટેન્શન્સ પ્રદાન કરે છે.

તમારું ટેસ્ટિંગ પર્યાવરણ સેટ કરવું

RTL સાથે પ્રારંભ કરવા માટે, તમારે તમારું પરીક્ષણ પર્યાવરણ સેટ કરવાની જરૂર પડશે. અહીં ક્રિએટ રિએક્ટ એપ (CRA) નો ઉપયોગ કરીને એક મૂળભૂત સેટઅપ છે, જે Jest અને RTL સાથે પૂર્વ-રૂપરેખાંકિત આવે છે:

npx create-react-app my-react-app
cd my-react-app
npm install --save-dev @testing-library/react @testing-library/jest-dom

સમજૂતી:

• `npx create-react-app my-react-app`: ક્રિએટ રિએક્ટ એપનો ઉપયોગ કરીને એક નવો રિએક્ટ પ્રોજેક્ટ બનાવે છે.
• `cd my-react-app`: નવા બનાવેલા પ્રોજેક્ટ ડિરેક્ટરીમાં નેવિગેટ કરે છે.
• `npm install --save-dev @testing-library/react @testing-library/jest-dom`: જરૂરી RTL પેકેજોને ડેવલપમેન્ટ ડિપેન્ડન્સીઝ તરીકે ઇન્સ્ટોલ કરે છે. `@testing-library/react` મુખ્ય RTL કાર્યક્ષમતા પ્રદાન કરે છે, જ્યારે `@testing-library/jest-dom` DOM સાથે કામ કરવા માટે મદદરૂપ Jest મેચર્સ પ્રદાન કરે છે.

જો તમે CRA નો ઉપયોગ નથી કરી રહ્યા, તો તમારે Jest અને RTL ને અલગથી ઇન્સ્ટોલ કરવાની અને RTL નો ઉપયોગ કરવા માટે Jest ને રૂપરેખાંકિત કરવાની જરૂર પડશે.

રિએક્ટ ટેસ્ટિંગ લાઇબ્રેરી સાથે કમ્પોનન્ટ ટેસ્ટિંગ માટેની શ્રેષ્ઠ પદ્ધતિઓ

૧. વપરાશકર્તાની ક્રિયાપ્રતિક્રિયાઓ જેવા ટેસ્ટ લખો

RTL નો મુખ્ય સિદ્ધાંત કમ્પોનન્ટ્સનું પરીક્ષણ કરવું છે જેમ કે વપરાશકર્તા કરશે. આનો અર્થ એ છે કે વપરાશકર્તા શું જુએ છે અને શું કરે છે તેના પર ધ્યાન કેન્દ્રિત કરવું, આંતરિક અમલીકરણની વિગતો પર નહીં. RTL દ્વારા પ્રદાન કરાયેલ `screen` ઓબ્જેક્ટનો ઉપયોગ કરીને તેમના ટેક્સ્ટ, રોલ અથવા સુલભતા લેબલ્સના આધારે એલિમેન્ટ્સ માટે ક્વેરી કરો.

ઉદાહરણ: બટન ક્લિકનું પરીક્ષણ

ધારો કે તમારી પાસે એક સરળ બટન કમ્પોનન્ટ છે:

// Button.js
import React from 'react';

function Button({ onClick, children }) {
  return {children};
}

export default Button;

અહીં તમે RTL નો ઉપયોગ કરીને તેનું પરીક્ષણ કેવી રીતે કરશો:

// Button.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

describe('Button Component', () => {
  it('calls the onClick handler when clicked', () => {
    const handleClick = jest.fn();
    render(Click Me);

    const buttonElement = screen.getByText('Click Me');
    fireEvent.click(buttonElement);

    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

સમજૂતી:

• `render(Click Me)`: મોક `onClick` હેન્ડલર સાથે બટન કમ્પોનન્ટને રેન્ડર કરે છે.
• `screen.getByText('Click Me')`: દસ્તાવેજમાં "Click Me" ટેક્સ્ટ ધરાવતા એલિમેન્ટ માટે ક્વેરી કરે છે. આ રીતે વપરાશકર્તા બટનને ઓળખશે.
• `fireEvent.click(buttonElement)`: બટન એલિમેન્ટ પર ક્લિક ઇવેન્ટનું અનુકરણ કરે છે.
• `expect(handleClick).toHaveBeenCalledTimes(1)`: ખાતરી કરે છે કે `onClick` હેન્ડલર એકવાર કોલ થયું હતું.

આ અમલીકરણની વિગતોના પરીક્ષણ કરતાં શા માટે વધુ સારું છે: કલ્પના કરો કે તમે અલગ ઇવેન્ટ હેન્ડલરનો ઉપયોગ કરવા અથવા આંતરિક સ્થિતિ બદલવા માટે બટન કમ્પોનન્ટને રિફેક્ટર કરો છો. જો તમે ચોક્કસ ઇવેન્ટ હેન્ડલર ફંક્શનનું પરીક્ષણ કરી રહ્યા હોત, તો તમારો ટેસ્ટ તૂટી જશે. વપરાશકર્તાની ક્રિયાપ્રતિક્રિયા (બટન પર ક્લિક કરવું) પર ધ્યાન કેન્દ્રિત કરીને, રિફેક્ટરિંગ પછી પણ ટેસ્ટ માન્ય રહે છે.

૨. વપરાશકર્તાના ઇરાદા પર આધારિત ક્વેરીઝને પ્રાથમિકતા આપો

RTL એલિમેન્ટ્સ શોધવા માટે વિવિધ ક્વેરી પદ્ધતિઓ પ્રદાન કરે છે. આ ક્રમમાં નીચેની ક્વેરીઝને પ્રાથમિકતા આપો, કારણ કે તે શ્રેષ્ઠ રીતે પ્રતિબિંબિત કરે છે કે વપરાશકર્તાઓ તમારા કમ્પોનન્ટ્સને કેવી રીતે સમજે છે અને તેની સાથે ક્રિયાપ્રતિક્રિયા કરે છે:

• getByRole: આ ક્વેરી સૌથી વધુ સુલભ છે અને તે તમારી પ્રથમ પસંદગી હોવી જોઈએ. તે તમને તેમના ARIA રોલ્સ (દા.ત., બટન, લિંક, હેડિંગ) ના આધારે એલિમેન્ટ્સ શોધવાની મંજૂરી આપે છે.
• getByLabelText: આનો ઉપયોગ ચોક્કસ લેબલ સાથે સંકળાયેલ એલિમેન્ટ્સ, જેમ કે ઇનપુટ ફીલ્ડ્સ શોધવા માટે કરો.
• getByPlaceholderText: આનો ઉપયોગ તેમના પ્લેસહોલ્ડર ટેક્સ્ટના આધારે ઇનપુટ ફીલ્ડ્સ શોધવા માટે કરો.
• getByText: આનો ઉપયોગ તેમના ટેક્સ્ટ કન્ટેન્ટના આધારે એલિમેન્ટ્સ શોધવા માટે કરો. ચોક્કસ બનો અને સામાન્ય ટેક્સ્ટનો ઉપયોગ કરવાનું ટાળો જે બહુવિધ સ્થળોએ દેખાઈ શકે છે.
• getByDisplayValue: આનો ઉપયોગ તેમના વર્તમાન મૂલ્યના આધારે ઇનપુટ ફીલ્ડ્સ શોધવા માટે કરો.

ઉદાહરણ: ફોર્મ ઇનપુટનું પરીક્ષણ

// Input.js
import React from 'react';

function Input({ label, placeholder, value, onChange }) {
  return (
    

      {label}
      
    
  );
}

export default Input;

ભલામણ કરેલ ક્વેરી ક્રમનો ઉપયોગ કરીને તેનું પરીક્ષણ કેવી રીતે કરવું તે અહીં છે:

// Input.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Input from './Input';

describe('Input Component', () => {
  it('updates the value when the user types', () => {
    const handleChange = jest.fn();
    render();

    const inputElement = screen.getByLabelText('Name');
    fireEvent.change(inputElement, { target: { value: 'John Doe' } });

    expect(handleChange).toHaveBeenCalledTimes(1);
    expect(handleChange).toHaveBeenCalledWith(expect.objectContaining({ target: { value: 'John Doe' } }));
  });
});

સમજૂતી:

• `screen.getByLabelText('Name')`: "Name" લેબલ સાથે સંકળાયેલ ઇનપુટ ફીલ્ડ શોધવા માટે `getByLabelText` નો ઉપયોગ કરે છે. આ ઇનપુટ શોધવા માટે સૌથી વધુ સુલભ અને વપરાશકર્તા-મૈત્રીપૂર્ણ રીત છે.

૩. અમલીકરણની વિગતોનું પરીક્ષણ કરવાનું ટાળો

પહેલાં ઉલ્લેખ કર્યો તેમ, આંતરિક સ્થિતિ, ફંક્શન કોલ્સ અથવા ચોક્કસ CSS ક્લાસનું પરીક્ષણ કરવાનું ટાળો. આ અમલીકરણની વિગતો છે જે બદલાઈ શકે છે અને બરડ પરીક્ષણો તરફ દોરી શકે છે. કમ્પોનન્ટના અવલોકનક્ષમ વર્તન પર ધ્યાન કેન્દ્રિત કરો.

ઉદાહરણ: સીધી સ્થિતિનું પરીક્ષણ કરવાનું ટાળો

ચોક્કસ સ્થિતિ વેરિયેબલ અપડેટ થયું છે કે નહીં તે પરીક્ષણ કરવાને બદલે, તે સ્થિતિના આધારે કમ્પોનન્ટ સાચો આઉટપુટ રેન્ડર કરે છે કે નહીં તે પરીક્ષણ કરો. ઉદાહરણ તરીકે, જો કોઈ કમ્પોનન્ટ બુલિયન સ્ટેટ વેરિયેબલના આધારે સંદેશ પ્રદર્શિત કરે છે, તો તે સંદેશ પ્રદર્શિત થાય છે કે છુપાયેલો છે તે પરીક્ષણ કરો, સ્ટેટ વેરિયેબલનું જ પરીક્ષણ કરવાને બદલે.

૪. ચોક્કસ કિસ્સાઓ માટે `data-testid` નો ઉપયોગ કરો

જ્યારે સામાન્ય રીતે `data-testid` એટ્રિબ્યુટ્સનો ઉપયોગ ટાળવો શ્રેષ્ઠ છે, ત્યારે કેટલાક ચોક્કસ કિસ્સાઓ છે જ્યાં તે મદદરૂપ થઈ શકે છે:

• અર્થપૂર્ણ અર્થ વિનાના એલિમેન્ટ્સ: જો તમારે એવા એલિમેન્ટને લક્ષ્ય બનાવવાની જરૂર હોય કે જેની કોઈ અર્થપૂર્ણ ભૂમિકા, લેબલ અથવા ટેક્સ્ટ ન હોય, તો તમે `data-testid` નો ઉપયોગ કરી શકો છો.
• જટિલ કમ્પોનન્ટ સ્ટ્રક્ચર્સ: જટિલ કમ્પોનન્ટ સ્ટ્રક્ચર્સમાં, `data-testid` તમને નાજુક સિલેક્ટર્સ પર આધાર રાખ્યા વિના ચોક્કસ એલિમેન્ટ્સને લક્ષ્ય બનાવવામાં મદદ કરી શકે છે.
• સુલભતા પરીક્ષણ: `data-testid` નો ઉપયોગ Cypress અથવા Playwright જેવા સાધનો સાથે સુલભતા પરીક્ષણ દરમિયાન ચોક્કસ એલિમેન્ટ્સને ઓળખવા માટે થઈ શકે છે.

ઉદાહરણ: `data-testid` નો ઉપયોગ કરવો

// MyComponent.js
import React from 'react';

function MyComponent() {
  return (
    

      
This is my component.
    
  );
}

export default MyComponent;

// MyComponent.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders the component container', () => {
    render();
    const containerElement = screen.getByTestId('my-component-container');
    expect(containerElement).toBeInTheDocument();
  });
});

મહત્વપૂર્ણ: `data-testid` નો ઓછો ઉપયોગ કરો અને ફક્ત ત્યારે જ જ્યારે અન્ય ક્વેરી પદ્ધતિઓ યોગ્ય ન હોય.

૫. અર્થપૂર્ણ ટેસ્ટ વર્ણનો લખો

દરેક ટેસ્ટનો હેતુ સમજવા અને નિષ્ફળતાઓને ડિબગ કરવા માટે સ્પષ્ટ અને સંક્ષિપ્ત ટેસ્ટ વર્ણનો નિર્ણાયક છે. વર્ણનાત્મક નામોનો ઉપયોગ કરો જે સ્પષ્ટપણે સમજાવે કે ટેસ્ટ શું ચકાસી રહ્યું છે.

ઉદાહરણ: સારા વિરુદ્ધ ખરાબ ટેસ્ટ વર્ણનો

ખરાબ: `it('works')`

સારું: `it('displays the correct greeting message')`

વધુ સારું: `it('displays the greeting message "Hello, World!" when the name prop is not provided')`

વધુ સારું ઉદાહરણ સ્પષ્ટપણે ચોક્કસ પરિસ્થિતિઓમાં કમ્પોનન્ટના અપેક્ષિત વર્તનને જણાવે છે.

૬. તમારા ટેસ્ટ નાના અને કેન્દ્રિત રાખો

દરેક ટેસ્ટ કમ્પોનન્ટના વર્તનના એક જ પાસાને ચકાસવા પર ધ્યાન કેન્દ્રિત કરવું જોઈએ. બહુવિધ દૃશ્યોને આવરી લેતા મોટા, જટિલ ટેસ્ટ લખવાનું ટાળો. નાના, કેન્દ્રિત ટેસ્ટ સમજવા, જાળવવા અને ડિબગ કરવા માટે સરળ હોય છે.

૭. ટેસ્ટ ડબલ્સ (મોક્સ અને સ્પાઇઝ) નો યોગ્ય રીતે ઉપયોગ કરો

ટેસ્ટ ડબલ્સ તમે જે કમ્પોનન્ટનું પરીક્ષણ કરી રહ્યા છો તેને તેની નિર્ભરતાઓથી અલગ કરવા માટે ઉપયોગી છે. બાહ્ય સેવાઓ, API કોલ્સ અથવા અન્ય કમ્પોનન્ટ્સનું અનુકરણ કરવા માટે મોક્સ અને સ્પાઇઝનો ઉપયોગ કરો.

ઉદાહરણ: API કોલનું મોકિંગ

// UserList.js
import React, { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    async function fetchUsers() {
      const response = await fetch('/api/users');
      const data = await response.json();
      setUsers(data);
    }

    fetchUsers();
  }, []);

  return (
    

      {users.map(user => (
        
{user.name}
      ))}
    
  );
}

export default UserList;

// UserList.test.js
import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import UserList from './UserList';

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve([
      { id: 1, name: 'John Doe' },
      { id: 2, name: 'Jane Smith' },
    ]),
  })
);

describe('UserList Component', () => {
  it('fetches and displays a list of users', async () => {
    render();

    // Wait for the data to load
    await waitFor(() => screen.getByText('John Doe'));

    expect(screen.getByText('John Doe')).toBeInTheDocument();
    expect(screen.getByText('Jane Smith')).toBeInTheDocument();
  });
});

સમજૂતી:

• `global.fetch = jest.fn(...)`: `fetch` ફંક્શનને મોક કરે છે જેથી તે વપરાશકર્તાઓની પૂર્વવ્યાખ્યાયિત સૂચિ પરત કરે. આ તમને વાસ્તવિક API એન્ડપોઇન્ટ પર આધાર રાખ્યા વિના કમ્પોનન્ટનું પરીક્ષણ કરવાની મંજૂરી આપે છે.
• `await waitFor(() => screen.getByText('John Doe'))`: દસ્તાવેજમાં "John Doe" ટેક્સ્ટ દેખાય તેની રાહ જુએ છે. આ જરૂરી છે કારણ કે ડેટા અસુમેળ રીતે મેળવવામાં આવે છે.

૮. એજ કેસ અને એરર હેન્ડલિંગનું પરીક્ષણ કરો

ફક્ત સુખી માર્ગનું પરીક્ષણ ન કરો. એજ કેસ, ભૂલ દૃશ્યો અને સીમા શરતોનું પરીક્ષણ કરવાની ખાતરી કરો. આ તમને સંભવિત સમસ્યાઓને વહેલી તકે ઓળખવામાં અને ખાતરી કરવામાં મદદ કરશે કે તમારું કમ્પોનન્ટ અણધારી પરિસ્થિતિઓને યોગ્ય રીતે સંભાળે છે.

ઉદાહરણ: એરર હેન્ડલિંગનું પરીક્ષણ

એક કમ્પોનન્ટની કલ્પના કરો જે API માંથી ડેટા મેળવે છે અને જો API કોલ નિષ્ફળ જાય તો ભૂલ સંદેશ પ્રદર્શિત કરે છે. તમારે એક ટેસ્ટ લખવો જોઈએ જે ચકાસે કે જ્યારે API કોલ નિષ્ફળ જાય ત્યારે ભૂલ સંદેશ યોગ્ય રીતે પ્રદર્શિત થાય છે.

૯. સુલભતા પર ધ્યાન કેન્દ્રિત કરો

સમાવેશી વેબ એપ્લિકેશન્સ બનાવવા માટે સુલભતા નિર્ણાયક છે. તમારા કમ્પોનન્ટ્સની સુલભતાનું પરીક્ષણ કરવા અને ખાતરી કરવા માટે RTL નો ઉપયોગ કરો કે તે WCAG જેવા સુલભતા ધોરણોને પૂર્ણ કરે છે. કેટલાક મુખ્ય સુલભતા વિચારણાઓમાં શામેલ છે:

• સિમેન્ટિક HTML: તમારા કન્ટેન્ટને માળખું અને અર્થ પ્રદાન કરવા માટે સિમેન્ટિક HTML એલિમેન્ટ્સ (દા.ત., ``, `
• ARIA એટ્રિબ્યુટ્સ: એલિમેન્ટ્સની ભૂમિકા, સ્થિતિ અને ગુણધર્મો વિશે વધારાની માહિતી પ્રદાન કરવા માટે ARIA એટ્રિબ્યુટ્સનો ઉપયોગ કરો, ખાસ કરીને કસ્ટમ કમ્પોનન્ટ્સ માટે.
• કીબોર્ડ નેવિગેશન: ખાતરી કરો કે બધા ઇન્ટરેક્ટિવ એલિમેન્ટ્સ કીબોર્ડ નેવિગેશન દ્વારા સુલભ છે.
• રંગ કોન્ટ્રાસ્ટ: ખાતરી કરવા માટે પૂરતા રંગ કોન્ટ્રાસ્ટનો ઉપયોગ કરો કે ઓછી દ્રષ્ટિવાળા વપરાશકર્તાઓ માટે ટેક્સ્ટ વાંચી શકાય તેવું છે.
• સ્ક્રીન રીડર સુસંગતતા: તમારા કમ્પોનન્ટ્સનું સ્ક્રીન રીડર સાથે પરીક્ષણ કરો જેથી ખાતરી થઈ શકે કે તે દ્રષ્ટિહીન વપરાશકર્તાઓ માટે અર્થપૂર્ણ અને સમજી શકાય તેવો અનુભવ પ્રદાન કરે છે.

ઉદાહરણ: `getByRole` સાથે સુલભતાનું પરીક્ષણ

// MyAccessibleComponent.js
import React from 'react';

function MyAccessibleComponent() {
  return (
    X
  );
}

export default MyAccessibleComponent;

// MyAccessibleComponent.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import MyAccessibleComponent from './MyAccessibleComponent';

describe('MyAccessibleComponent', () => {
  it('renders an accessible button with the correct aria-label', () => {
    render();
    const buttonElement = screen.getByRole('button', { name: 'Close' });
    expect(buttonElement).toBeInTheDocument();
  });
});

સમજૂતી:

• `screen.getByRole('button', { name: 'Close' })`: "Close" સુલભ નામ સાથે બટન એલિમેન્ટ શોધવા માટે `getByRole` નો ઉપયોગ કરે છે. આ સુનિશ્ચિત કરે છે કે બટન સ્ક્રીન રીડર્સ માટે યોગ્ય રીતે લેબલ થયેલ છે.

૧૦. તમારા ડેવલપમેન્ટ વર્કફ્લોમાં ટેસ્ટિંગને એકીકૃત કરો

ટેસ્ટિંગ તમારા ડેવલપમેન્ટ વર્કફ્લોનો એક અભિન્ન ભાગ હોવો જોઈએ, પછીનો વિચાર નહીં. જ્યારે પણ કોડ કમિટ અથવા ડિપ્લોય કરવામાં આવે ત્યારે આપમેળે ટેસ્ટ ચલાવવા માટે તમારા ટેસ્ટને તમારા CI/CD પાઇપલાઇનમાં એકીકૃત કરો. આ તમને બગ્સને વહેલી તકે પકડવામાં અને રિગ્રેશન્સને રોકવામાં મદદ કરશે.

૧૧. સ્થાનિકીકરણ અને આંતરરાષ્ટ્રીયકરણ (i18n) ને ધ્યાનમાં લો

વૈશ્વિક એપ્લિકેશન્સ માટે, પરીક્ષણ દરમિયાન સ્થાનિકીકરણ અને આંતરરાષ્ટ્રીયકરણ (i18n) ને ધ્યાનમાં લેવું નિર્ણાયક છે. ખાતરી કરો કે તમારા કમ્પોનન્ટ્સ વિવિધ ભાષાઓ અને લોકેલ્સમાં યોગ્ય રીતે રેન્ડર થાય છે.

ઉદાહરણ: સ્થાનિકીકરણનું પરીક્ષણ

જો તમે સ્થાનિકીકરણ માટે `react-intl` અથવા `i18next` જેવી લાઇબ્રેરીનો ઉપયોગ કરી રહ્યા છો, તો તમે તમારા ટેસ્ટમાં સ્થાનિકીકરણ સંદર્ભને મોક કરી શકો છો જેથી ખાતરી થઈ શકે કે તમારા કમ્પોનન્ટ્સ સાચો અનુવાદિત ટેક્સ્ટ પ્રદર્શિત કરે છે.

૧૨. પુનઃઉપયોગી સેટઅપ માટે કસ્ટમ રેન્ડર ફંક્શન્સનો ઉપયોગ કરો

મોટા પ્રોજેક્ટ્સ પર કામ કરતી વખતે, તમે બહુવિધ ટેસ્ટમાં સમાન સેટઅપ પગલાંનું પુનરાવર્તન કરી શકો છો. ડુપ્લિકેશન ટાળવા માટે, કસ્ટમ રેન્ડર ફંક્શન્સ બનાવો જે સામાન્ય સેટઅપ તર્કને સમાવે છે.

ઉદાહરણ: કસ્ટમ રેન્ડર ફંક્શન

// test-utils.js
import React from 'react';
import { render } from '@testing-library/react';
import { ThemeProvider } from 'styled-components';
import theme from './theme';

const AllTheProviders = ({ children }) => {
  return (
    
      {children}
    
  );
}

const customRender = (ui, options) =>
  render(ui, { wrapper: AllTheProviders, ...options })

// re-export everything
export * from '@testing-library/react'

// override render method
export { customRender as render }

// MyComponent.test.js
import React from 'react';
import { render, screen } from './test-utils'; // Import the custom render
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders correctly with the theme', () => {
    render();
    // Your test logic here
  });
});

આ ઉદાહરણ એક કસ્ટમ રેન્ડર ફંક્શન બનાવે છે જે કમ્પોનન્ટને થીમપ્રોવાઇડર સાથે લપેટે છે. આ તમને થીમ પર આધાર રાખતા કમ્પોનન્ટ્સનું સરળતાથી પરીક્ષણ કરવાની મંજૂરી આપે છે, દરેક ટેસ્ટમાં થીમપ્રોવાઇડર સેટઅપનું પુનરાવર્તન કર્યા વિના.

નિષ્કર્ષ

રિએક્ટ ટેસ્ટિંગ લાઇબ્રેરી કમ્પોનન્ટ ટેસ્ટિંગ માટે એક શક્તિશાળી અને વપરાશકર્તા-કેન્દ્રિત અભિગમ પ્રદાન કરે છે. આ શ્રેષ્ઠ પદ્ધતિઓને અનુસરીને, તમે જાળવણીક્ષમ, અસરકારક પરીક્ષણો લખી શકો છો જે વપરાશકર્તાના વર્તન અને સુલભતા પર ધ્યાન કેન્દ્રિત કરે છે. આ વૈશ્વિક પ્રેક્ષકો માટે વધુ મજબૂત, વિશ્વસનીય અને સમાવેશી રિએક્ટ એપ્લિકેશન્સ તરફ દોરી જશે. વપરાશકર્તાની ક્રિયાપ્રતિક્રિયાઓને પ્રાથમિકતા આપવાનું, અમલીકરણની વિગતોનું પરીક્ષણ ટાળવાનું, સુલભતા પર ધ્યાન કેન્દ્રિત કરવાનું અને તમારા ડેવલપમેન્ટ વર્કફ્લોમાં ટેસ્ટિંગને એકીકૃત કરવાનું યાદ રાખો. આ સિદ્ધાંતોને અપનાવીને, તમે ઉચ્ચ-ગુણવત્તાવાળી રિએક્ટ એપ્લિકેશન્સ બનાવી શકો છો જે વિશ્વભરના વપરાશકર્તાઓની જરૂરિયાતોને પૂર્ણ કરે છે.

મુખ્ય તારણો:

• વપરાશકર્તાની ક્રિયાપ્રતિક્રિયાઓ પર ધ્યાન કેન્દ્રિત કરો: કમ્પોનન્ટ્સનું પરીક્ષણ કરો જેમ કે વપરાશકર્તા તેમની સાથે ક્રિયાપ્રતિક્રિયા કરશે.
• સુલભતાને પ્રાથમિકતા આપો: ખાતરી કરો કે તમારા કમ્પોનન્ટ્સ વિકલાંગ વપરાશકર્તાઓ માટે સુલભ છે.
• અમલીકરણની વિગતો ટાળો: આંતરિક સ્થિતિ અથવા ફંક્શન કોલ્સનું પરીક્ષણ ન કરો.
• સ્પષ્ટ અને સંક્ષિપ્ત ટેસ્ટ લખો: તમારા ટેસ્ટને સમજવા અને જાળવવા માટે સરળ બનાવો.
• તમારા વર્કફ્લોમાં ટેસ્ટિંગને એકીકૃત કરો: તમારા ટેસ્ટને સ્વચાલિત કરો અને તેમને નિયમિતપણે ચલાવો.
• વૈશ્વિક પ્રેક્ષકોને ધ્યાનમાં લો: ખાતરી કરો કે તમારા કમ્પોનન્ટ્સ વિવિધ ભાષાઓ અને લોકેલ્સમાં સારી રીતે કામ કરે છે.